<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:fn="http://java.sun.com/jsp/jstl/functions"
                xmlns:ds="http://deltaset.org/deltaset-faces"
                xmlns:meta="http://deltaset.org/deltaset-meta"
                xmlns:di="http://java.sun.com/jsf/composite/deltaset.desktop/internal"
                xmlns:composite="http://java.sun.com/jsf/composite">
    <composite:interface>       
        <composite:attribute name="preferencesInclude" type="java.lang.String"/>
        <composite:attribute name="touchIcon" type="java.lang.String"/>       
    </composite:interface>

    <composite:implementation>
        <f:view contentType="text/html"/>
        <h:head>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
            <meta name="apple-mobile-web-app-capable"  content="yes" />
            <meta name="apple-mobile-web-app-status-bar-style"  content="default" />
            <meta name="viewport"  content="user-scalable=no" />
            <c:if test="#{not empty cc.attrs.touchIcon}">
                <link rel="apple-touch-icon"  href="#{cc.attrs.touchIcon}" />
            </c:if>

            <title>#{desktopBean.appTitle}</title>  

            <h:outputScript library="javax.faces" name="jsf.js"  target="head"/> 
            <h:outputScript library="deltaset.faces" name="js/deltaset-faces.js" target="head"/>
            <h:outputScript library="deltaset.faces" name="js/jquery-1.6.2.min.js" target="head"/>
            <h:outputScript library="deltaset.faces" name="js/jquery-ui-1.8.16.custom.min.js" target="head"/>
            <h:outputScript library="deltaset.desktop" name="js/jquery.layout-1.3.0.rc29.15.js"  target="head"/> 
            <h:outputScript library="deltaset.desktop" name="js/jquery.layout.resizeTabLayout.min-1.0.js"  target="head"/>         


            <h:outputScript library="deltaset.desktop" name="js/home.js" target="head"/> 
            <h:outputStylesheet library="deltaset.desktop" name="css/home.css"/>
            <!--<h:outputStylesheet library="deltaset.desktop" name="css/layout-default-latest.css"/>-->
            <script>
                /**
                 *	This ensure the header "page" (view state data) stays in JSF's history
                 */
                var ajaxRequestCount = 0;
                pingHeader = function() {
                    // Ping every 6 Ajax requests...
                   // return;
                    if ((++ajaxRequestCount) > 5) {
                        // Reset counter...
                        ajaxRequestCount = 0;

                        // Get element from header form...
                        var src = document.getElementById('main:west:menu:execButton');
                        var options = {
                            // noop
                            execute: '@this',
                            render: '@this'
                        };
                        jsf.ajax.request(src, null, options);           
                    }
                }
    
                callbackIfSuccess = function(data){
                    deltaset.injectViewData(data);
                    if('complete'==data.status){
                        //alert('data.status is complete');
                        // pingHeader();           
                    }
                }
    
               // initOnLoad = function(){
                    //that is for 'ping the header'
                   // jsf.ajax.addOnEvent(callbackIfSuccess); 
                    //initing the layout manager
                    //jQuery(document).ready(function () {
                         //jQuery('body').layout({ applyDefaultStyles: true });
                    //    jQuery('#container').layout();
                    //});
               // }
    
                //document.onload=initOnLoad();
                //jQuery(document).ready(initOnLoad);
            </script>

            <style>
                .ui-dialog { position: absolute !important;
                             padding: .2em !important;
                             /* width: 300px !important;*/
                             overflow: hidden !important;}             

                .ds-shadow{                  
                    text-shadow: 1px 1px 1px #000 !important;
                }

                form{
                    display:inline;
                    margin:0;
                    padding:0;					
                }
                .ds-field{padding-right: 0 !important;}
            </style>
        </h:head>

        <h:body id="mainBody" styleClass="ui-widget-shadow">
            <script>
               jQuery(document).ready(function(){jsf.ajax.addOnEvent(callbackIfSuccess);});
            </script>
            <c:set var="contentAreaId" value=":#{cc.clientId}:contentArea"/>

            <ui:include src="internal/topbar.xhtml">
                <ui:param name="desktop" value="#{desktopBean}"/>
                <ui:param name="preferencesInclude" value="#{cc.attrs.preferencesInclude}"/>
            </ui:include>

            <div id="outer-north">
                <div style="height:20px;">&#160;</div>
            </div>

            <DIV id="page-loading">Loading...</DIV>

            <div id="outer-south" class="hidden">
                &#160;
            </div>

            <DIV id="outer-center" class="hidden">
                <DIV id="innerPanel" >
                    <DIV class="ui-layout-north ui-widget-header ui-corner-top ds-shadow">
                        <div style="padding:5px;">
                            <b style="font-size:1.8em;">#{desktopBean.appTitle}</b>            
                        </div>

                    </DIV>

                    <DIV class="ui-layout-center">

                        <DIV class="ui-widget-header ui-corner-top ds-shadow">Workspace</DIV>

                        <DIV id="notes" class="ui-widget-content">
                            <!--ui:include src="home-content.xhtml"/-->
                            <h:panelGroup id="contentArea" styleClass="ui-layout-content ui-widget-content"  layout="block">
                                <ui:include src="#{desktopBean.pageSrc}">
                                    <ui:param name="contentAreaId" value="#{contentAreaId}"/>
                                    <ui:param name="contentAreaUrl" value="#{desktopBean.pageSrc}"/>
                                    <c:forEach items="#{desktopBean.menuItem.parameterNames}" var="parameterName">
                                        <ui:param name="#{parameterName}" value="#{desktopBean.menuItem.getParameter(parameterName)}"/>
                                    </c:forEach>
                                </ui:include>
                            </h:panelGroup>
                        </DIV>

                        <DIV class="ui-widget-footer ui-widget-header ui-corner-bottom ds-shadow">
                            <ui:include src="internal/footer.xhtml"/>
                        </DIV>

                    </DIV>
                    <h:form id="menu" style="height: 100%;padding:0;margin:0;">
                        <h:commandButton value="HIDDEn" id="execButton" style="display:none"/> 
                        <DIV class="ui-layout-west">
                            <div style="display:block;width:100%;height:100%"> 
                                <ui:include src="internal/menu.xhtml">
                                    <ui:param name="desktop" value="#{desktopBean}"/>
                                </ui:include>
                            </div>
                        </DIV>
                    </h:form> 

                </DIV><!-- /#tab1 -->

            </DIV><!-- /#outer-center -->

            <ui:debug hotkey="z" rendered="true"/>            
        </h:body>

    </composite:implementation>
</ui:composition> 
